<template>
    <div class="group-management">
        <div class="search-content">
            <!-- <el-input class="search-content-input" style="width: 0;visibility: visible;" v-model="searchContent.groupId" placeholder="请输入活动ID"></el-input> -->
            <div class="time-range-wrapper" >
                <!-- <span class="time-range-label">请选择活动时间：</span> -->
                <el-date-picker
                        v-model="searchContent.groupTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
			</div>
          
            <el-select v-model="searchContent.status" placeholder="请选择状态">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
			</el-select>
			<el-select v-model="searchContent.class" placeholder="请选择分类">
                <el-option
                        v-for="item in search_status"
                        :key="item.id"
                        :label="item.project_class_name"
                        :value="item.id">
                </el-option>
            </el-select>
              <el-select v-model="s_type" class="s_type">
                <el-option label="ID" value="1"></el-option>
                <el-option label="项目券名称" value="2"></el-option>
            </el-select>
			<el-input class="search-content-input" v-model="searchContent.groupName" :placeholder="s_type == '1' ? '请输入ID' : '请输入项目券名称'"></el-input>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="resetSearchData">重置</el-button>
        </div>
        <div class="search-list">
            <el-table :data="groupList" border :height="oHeight">
                <el-table-column
                        align="center"
                        prop="groupId"
                        label="ID"
                        min-width="60"></el-table-column>
                <el-table-column
                        align="center"
                        prop="groupName"
                        label="项目券名称"
                        min-width="120"></el-table-column>
                <el-table-column
                        align="center"
                        prop="storeName"
                        label="项目分类"
						min-width="120"></el-table-column>
						
          
                <el-table-column
                        align="center"
                        prop="pc_deduction_price"
                        label="抵扣金额"
                        min-width="90">
                    <!-- <template slot-scope="scope">
                        {{computedCheckStatus(scope.row.status)}}
                    </template> -->
                </el-table-column>
                <el-table-column
						align="center"
						prop="pc_use_condition"
                        label="使用条件"
                        min-width="160">
                    
				</el-table-column>
				<el-table-column
				align="center"
				prop="groupSort"
				label="结算金额"
				min-width="120">
			</el-table-column>
			<el-table-column
				align="center"
				prop="pc_sum"
				label="创建数量"
				min-width="110">
			</el-table-column>
			<el-table-column
				align="center"
				prop="pc_remaining"
				label="剩余数量"
				min-width="120">
			</el-table-column>
			<el-table-column
				align="center"
				prop="pc_send_num"
				label="发放数量"
				min-width="120">
			</el-table-column>
			  <el-table-column
                        align="center"
                        label="创建日期"
                        min-width="120">
                    <template slot-scope="scope">
                        <span>{{scope.row.pc_addtime | dateFormatter('YYYY-MM-DD ')}}</span>
                       
                    </template>
                </el-table-column>
                <!-- <el-table-column
                        align="center"
                        label="截止使用日期"
                        min-width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.pc_endtime != 0">{{scope.row.pc_endtime | dateFormatter('YYYY-MM-DD ')}}</span>
                    </template>
                </el-table-column> -->
				<el-table-column
					align="center"
					prop="pc_state"
					label="状态"
					min-width="100">
					  <template slot-scope="scope">
            	            {{computedCheckStatus(scope.row.status)}}
            	        </template>
				</el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    min-width="110">
                    <template slot-scope="scope">
						<el-dropdown size="mini" trigger="click">
						  <el-button type="primary">
  						      展开<i class="el-icon-arrow-down el-icon--right"></i>
  						  </el-button>
						  <el-dropdown-menu slot="dropdown" class="dropdown-btn">
						    <el-dropdown-item><el-button :type="scope.row.status == 0 || scope.row.status == 4 ? 'info' : 'primary'" @click="showcheckDialog(scope.row.groupId, 1)">编辑使用店铺</el-button></el-dropdown-item>
						    <el-dropdown-item><el-button :type="scope.row.status == 0 || scope.row.status == 4 ? 'info' : 'primary'" @click="showcheckDialog(scope.row.groupId, 2)">编辑发放店铺</el-button></el-dropdown-item>
						    <el-dropdown-item><el-button type="warning" v-if="scope.row.status == 1"  @click="showGroupDialog(scope.row)">关闭</el-button></el-dropdown-item>
						  </el-dropdown-menu>
						</el-dropdown>
						<!-- v-if="scope.row.project_class_id == 37" -->
                        <!-- <el-button :type="scope.row.status == 0 || scope.row.status == 4 ? 'info' : 'primary'" @click="showcheckDialog(scope.row.groupId)">编辑使用店铺</el-button>
                        <el-button :type="scope.row.status == 0 || scope.row.status == 4 ? 'info' : 'primary'" @click="handleGrantDialog(scope.row.groupId)">编辑发放店铺</el-button>
                        <el-button type="warning" v-if="scope.row.status == 1"  @click="showGroupDialog(scope.row)">关闭</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group" >
					<el-button type="primary" @click="showFn">新增项目券</el-button>
                    <!-- <a class="btn-bottom" >新增项目券</a> -->
                </div>
                <div class="paginationOne">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="searchContent.currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="searchContent.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
		</div>
		       <el-dialog
                :before-close="handlecheckClose"
                title="提示"
                :visible="checkdialog"
				width="30%">
				<input type="radio" id="male" value="1" v-model="gender"> 通过

				<input type="radio" id="female" value="0" v-model="gender"> 未通过
				<!-- <el-select v-model="searchContent.check" placeholder="请选择审核状态">
					<el-option
							v-for="item in check"
							:key="item.value"
							:label="item.label"
							:value="item.value">
					</el-option>
				</el-select> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="handlecheckClose">取 消</el-button>
                <el-button type="primary" @click="confirmcheck">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                :before-close="handleClose"
                title="提示"
                :visible="dialogVisible"
                width="30%">
            <span>{{dialogMsg}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="confirmClose">确 定</el-button>
            </span>
		</el-dialog>
		<default-opr ref="ceshi"></default-opr>
    </div>
</template>

<script>
	import { resize } from "@/common/js/height.js";
    import {dateFormatter} from "../../../../common/js/util";
	import Qs from 'qs'
	import defaultOpr from './default-opr'
	export default {
		components: {defaultOpr},
		data() {
			return {
				options: [
					
					{label: '开启', value: 1},
					{label: '关闭', value: 2}
				],check: [
					{label: '通过', value: 1},
					{label: '未通过', value: 0}
					
				],
				search_status: [
				],
				oHeight: 800,
				searchContent: {
					groupId: '',
					groupName: '',
					storeName: '',
					addTime: '',
					groupTime: '',
					status: '',
					check: '',
					currentPage: 1,
					pageSize: localStorage.getItem("pageSize") * 1 || 10
				},
				gender: '',
				needCloseGoods: null,
				dialogVisible: false,
				checkdialog:false,
				dialogMsg: '',
				groupList: [],
                total: 0,
                s_type:"1"
			}
		},
		computed: {
			exportLink() {
				const data = {};
				data.export = 'yes';
				data.id = this.searchContent.groupId;
				data.title_name = this.searchContent.groupName;
				data.store_name = this.searchContent.storeName;
				let domain = document.domain;
				if (domain != 'admin.mycjj.com' && domain != 'admin.chejj.cn') {
					domain = 'admin.chejj.cn'
				}
				return location.protocol + '//' + domain.replace('admin', 'api') + '/admin/afterSalesGroupBuy/index.php?act=groupBuy&op=list&' + Qs.stringify(data);
			}
		},
		methods: {
			copyLink(url) {
				var cText = url ? url : document.location.href;
				var aux = document.createElement("input");
				aux.setAttribute("value", cText);
				document.body.appendChild(aux);
				aux.select();
				document.execCommand("copy");
				document.body.removeChild(aux);
				alert("链接复制成功!");
			},
			showFn(data){
			this.$refs.ceshi.show_dialog_fn(data);
		},
			handch(item, id) {
				const data = {};
				data.brand_group_id = item;
				data.brand_group_sort = id;
				this.$http.post('/admin/brandgroup/index.php?act=brandgroup&op=editSort', data).then(res => {
					if (res.code == 1) {
					this.getListData();
					}
					else {
						// alert(res.msg+"88");
					}
				})
        },
			closeGroup(group) {
				this.$http.post('/admin/platform_coupon/index.php?act=platform_coupon&op=close', {
					id: group.groupId
				}).then(res => {
					if (res.code == 1) {
				
               
						
						this.handleClose();
						this.getListData();
						
					} else {
						
						alert(res.msg)
					}
				})
			},
			checkGroup(group,check) {
				const data = {};
				data.brand_group_id = group.groupId;
				data.brand_group_state = check;

				this.$http.post('/admin/brandgroup/index.php?act=brandgroup&op=check', {
					brand_group_id : group.groupId,
				    brand_group_state :check

				}).then(res => {
					if (res.code == 1) {
				
               
						 
						this.handlecheckClose();
						this.getListData();
						
					} else {
						
						alert(res.msg)
					}
				})
			},
			showGroupDialog(groupItem) {
				this.needCloseGroup = groupItem
				this.dialogMsg = '确定要关闭此项目券？';
				this.dialogVisible = true;
			},
			handleClose() {
				this.dialogVisible = false;
				this.dialogMsg = '';
				this.needCloseGroup = null;
			},
			showcheckDialog(groupItem, type = 1) { // 1 编辑使用、2 编辑发放
				this.$router.push(`/home/operate-panel/project-voucher/group-edit?id=${groupItem}&type=${type}`);
			},
			handlecheckClose() {
				this.checkdialog = false;
				this.needCloseGroup = null;
			},
			confirmClose() {
				this.closeGroup(this.needCloseGroup);
			},
			confirmcheck() {
				this.checkGroup(this.needCloseGroup,this.gender);
			},
			computedCheckStatus(code) {
				switch (code) {
					case 0:
						return '禁用';
					case 1:
						return '开启';
					case 2:
						return '关闭';
					case 3:
						return '3';
					case 4:
						return '4';
				}
			},
			resetSearchData() {
				this.searchContent.groupId = '';
				this.searchContent.groupName = '';
				this.searchContent.storeName = '';
				this.searchContent.addTime = '';
				this.searchContent.groupTime = '';
				this.searchContent.status = '';
                this.searchContent.class = '';
                this.s_type = "1";
                this.searchContent.curpage = 1;
                this.searchContent.pageSize = localStorage.getItem("pageSize")*1 || 10;
                this.getListData();
			},
			search() {
				this.searchContent.currentPage = 1;
				this.getListData();
			},
			handleSizeChange(pageSize) {
                localStorage.setItem("pageSize", pageSize)
				this.searchContent.pageSize = pageSize;
				this.searchContent.currentPage = 1;
				this.getListData();
			},
			handleCurrentChange(page) {
				this.searchContent.currentPage = page;
				this.getListData();
			},
			getListData() {
				const data = {};
				data.curpage = this.searchContent.currentPage;
				data.pagesize = this.searchContent.pageSize;
                data.id = this.searchContent.groupId;
                data.bg_store_name = this.searchContent.storeName;
                this.s_type == '1' ? data.id = this.searchContent.groupName : data.keyword = this.searchContent.groupName;
				if (this.searchContent.addTime) {
					const startAddMS = this.searchContent.addTime[0].getTime();
					const endAddMS = this.searchContent.addTime[1].getTime();
					if (startAddMS == endAddMS) {
						data.start_addtime = dateFormatter('YYYY-MM-DD HH:mm:ss', startAddMS);
						data.end_addtime = dateFormatter('YYYY-MM-DD HH:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
                    } else {
						data.start_addtime = dateFormatter('YYYY-MM-DD HH:mm:ss', this.searchContent.addTime[0]);
						data.end_addtime = dateFormatter('YYYY-MM-DD HH:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
                    }
				}
				if (this.searchContent.groupTime) {
					const startMS = this.searchContent.groupTime[0].getTime();
					const endMS = this.searchContent.groupTime[1].getTime();
					if (startMS == endMS) {
						data.add_start_time = dateFormatter('YYYY-MM-DD HH:mm:ss', startMS);
						data.add_end_time = dateFormatter('YYYY-MM-DD HH:mm:ss', endMS + (24 * 60 * 60 - 1) * 1000);
					} else {
						data.add_start_time = dateFormatter('YYYY-MM-DD HH:mm:ss', startMS);
						data.add_end_time = dateFormatter('YYYY-MM-DD HH:mm:ss', endMS + (24 * 60 * 60 - 1) * 1000);
					}
				}
				data.state = this.searchContent.status;
				data.project_class = this.searchContent.class;

				this.$http.post('/admin/platform_coupon/index.php?act=platform_coupon&op=coupon_list', data).then(res => {
					if (res.code == 1) {
						if (res.data && res.data.coupon_list && res.data.coupon_list.length) {
                            this.groupList = res.data.coupon_list.map(function (item) {
								return {
									groupSort: item.pc_settle_accounts_price,
									groupId: item.id,
									groupName: item.pc_name,
									pc_deduction_price:item.pc_deduction_price,
									pc_use_condition:item.pc_use_condition,
									pc_remaining:item.pc_remaining,
									pc_send_num:item.pc_send_num,
									pc_sum:item.pc_sum,
									pc_use_condition:item.pc_use_condition,
									pc_use_condition:item.pc_use_condition,
									headerImage: item.header_image,
									storeName: item.project_class_name,
									pc_addtime: item.pc_addtime * 1000,
									pc_endtime: item.pc_endtime * 1000,
									status: item.pc_state * 1,
									project_class_id: item.project_class_id,
									link: window.location.protocol + '//' + window.document.domain.replace('admin', 'web') + '/member/car_groupon/car_groupon_index.html?bid=' + item.brand_group_id
								}
							});
							this.total = parseInt(res.data.TotalNum);
							this.search_status=res.data.class_list;
						} else {
							this.groupList = [];
							this.total = 0;
						}
					}
					else if (res.code == 2001) {
						this.groupList = [];
						this.total = 0;
					}
					else {
						alert(res.msg);
					}
				})
			},
			goCheckGroup(group) {
				if (group.status == 0 || group.status == 4) {
					return;
                }
				// this.$router.push(`/home/operate-panel/car-group/group-detail?id=${group.groupId}`)
			}
		},
		mounted() {
			resize(this)
		},
		created() {
			if (this.$parent.tabLists[1] && this.$parent.tabLists[1].label == "审核" && this.$parent.tabLists[1].name == "group-detail") {
				this.$parent.tabLists.splice(1, 1);
            }
			this.getListData();
		},
		name: "group-management"
	}
</script>

<style lang="scss" scoped>
    .group-management {
        .search-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-input {
                width: 200px;
            }
            .time-range-wrapper {
                .time-range-label {
                    font-size: 14px;
                }
                display: flex;
                align-items: center;
                /deep/.el-range-separator {
                    box-sizing: content-box;
                }
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    .btn-bottom {
        background: #409EFF;
        color: #fff;
        border: 0;
        font-size: 14px;
        padding: 5px 8px;
        border-radius: 3px;
        display: inline-block;
    }
	 /deep/ .el-button-group {
		.el-button { 
			height: 28px;
		}
		> .el-button:first-child { padding: 0 9px 0 12px; }
	}
	.dropdown-btn {
		.el-dropdown-menu__item {
			padding: 4px 12px;
			&:hover, &:focus, &:active {
				background-color: #fff;
			}
			.el-button {
				width: 100px;
			}
		}
	}
    .s_type {
        width: 120px;
        margin-right: -8px;
    }
</style>